<template>
    <div>
        <dv-border-box1>
            <div class="title">隐患分析</div>
            <div class="mark-box">
                <el-popover placement="top" :width="370" trigger="hover" popper-class="tooltip-style">
                    <template #reference>
                        <div class="safe" @click="hanldeMarks">
                            <dv-decoration-9 style="width: 150px; height: 150px" :dur="10">{{ '安全得分' + marks
                                }}</dv-decoration-9>
                        </div>
                    </template>
                    <div>
                        <div>安全得分：物联网得分+巡查得分+灭火演练+消防培训+三关一闭+动火动电+烟道清洗+学习+时间</div>
                        <div>更新规则：每日计算一次</div>
                    </div>
                </el-popover>

                <div class="trouble">
                    <veEcharts ref="veEchartsRef" :option="option" :on-mouseclick="showTableList" />
                </div>
            </div>
            <!-- <markListDia ref="markList"  :showDia="showDia"></markListDia> -->
            <markListDia ref="markList"></markListDia>
            <el-dialog title="当前隐患" :fullscreen="fullscreen" v-model="tableDialog.tableDialogVisabled" width="1200px"
                destroy-on-close :close-on-click-modal="false">
                <div class="avue-crud__dialog__menu">
                    <img @click="fullscreen = !fullscreen" class="quan" src="@/assets/images/quan.png" alt="">
                </div>

                <component :is="dom[tableDialog.tableComponentName]" :data="tableDialog.earlyWarning" :patrol_status="1"
                    :drillTrainType="tableDialog.drillTrainType">
                </component>
            </el-dialog>
        </dv-border-box1>
    </div>

    <el-dialog :fullscreen="fullscreen" v-model="marksInfo.isMark" width="70%" append-to-body
        :close-on-click-modal="false" title="安全得分">
        <div class="avue-crud__dialog__menu">
            <img @click="fullscreen = !fullscreen" class="quan" src="@/assets/images/quan.png" alt="">
        </div>

        <div class="search-container" ref="searchRef">
            <el-form :model="search" inline size="mini" label-width="80px">
                <el-form-item label="开始时间">
                    <el-date-picker class="w-180" v-model="search.sta_time" type="datetime" placeholder="请选择"
                        value-format="YYYY-MM-DD" />
                </el-form-item>
                <el-form-item label="结束时间">
                    <el-date-picker class="w-180" v-model="search.end_time" type="datetime" placeholder="请选择"
                        value-format="YYYY-MM-DD" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="hanldeSearchList" size="mini">搜索</el-button>
                    <el-button type="warning" @click="hanldeReset" size="mini">重置</el-button>
                    <el-button type="success" @click="hanldeDownExcel" size="mini">导出</el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-table :data="marksInfo.tableData" :height="fullscreen ? 'auto' : '450px'">
            <el-table-column label="序号" type="index" min-width="80"></el-table-column>
            <el-table-column label="创建时间" min-width="120" prop="create_time"></el-table-column>
            <el-table-column label="巡查得分" min-width="120" prop="task_socre"></el-table-column>
            <el-table-column label="灭火演练" prop="activity_px" min-width="120"></el-table-column>
            <el-table-column label="消防培训" prop="activity_yl" min-width="120"></el-table-column>
            <el-table-column label="三关一闭" min-width="120" prop="close"></el-table-column>
            <el-table-column label="动火动电" min-width="120" prop="dhdj"></el-table-column>
            <el-table-column label="烟道清洗" min-width="120" prop="flue"></el-table-column>
            <el-table-column label="学习" min-width="120" prop="study"></el-table-column>
            <el-table-column label="时间" min-width="120" prop="time"></el-table-column>
        </el-table>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, shallowReactive, onMounted } from 'vue'
import { earlyWarning, equipments, scoreLog, scoreLogListDerive } from '@/api/dashboard'
import veEcharts from '../veEcharts.vue'
import markListDia from './components/markListDia.vue'
import unitMange from './components/unitMange.vue'
import dangerWcl from './components/dangerWcl.vue'
import drillTrain from './components/drillTrain.vue'
import overtimeHighBuildingUnitTotal from './components/overtimeHighBuildingUnitTotal.vue'
import faceRecognitionMismatch from './components/faceRecognitionMismatch.vue'
import workOrderTotal from './components/workOrderTotal.vue'
import outPlanLocationTotal from './components/outPlanLocationTotal.vue'
import notOnTimeGive from './components/notOnTimeGive.vue'
import unitTaskMange from '../safeMarks/components/unitTaskMange.vue'
import twoMonthDangerUnitSourceWbTotal from './components/twoMonthDangerUnitSourceWbTotal.vue'
import thirdOneClose from './components/thirdOneClose.vue'
import hiddenDangerMange from './components/hiddenDangerMange.vue'
import thermalPowerList from './components/thermalPowerList.vue'
import flueClean from './components/flueClean.vue'
import study from './components/study.vue'
import activity from '@/views/activity/activity.vue'
import rehearsal from '@/views/rehearsal/rehearsal.vue'
const dom = shallowReactive({
    unitMange,
    dangerWcl,
    drillTrain,
    study,
    rehearsal,
    activity,
    unitTaskMange,
    overtimeHighBuildingUnitTotal,
    faceRecognitionMismatch,
    workOrderTotal,
    outPlanLocationTotal,
    notOnTimeGive,
    flueClean,
    thermalPowerList,
    hiddenDangerMange,
    thirdOneClose,
    twoMonthDangerUnitSourceWbTotal
})

let search = reactive({
    sta_time: '',
    end_time: ''
})

// 搜索
const hanldeSearchList = () => {
    hanldeMarks()
}

// 重置
const hanldeReset = () => {
    search.end_time = '';
    search.sta_time = '';
}

const hanldeDownExcel = () => {
    scoreLogListDerive(search).then(res => {
        const blob = new Blob([res], {
            type: 'application/vnd.ms-excel'
        })

        if (window.navigator.msSaveOrOpenBlob) {
            //兼容IE10
            navigator.msSaveBlob(blob, '导出文件.xlsx')
        } else {
            const href = URL.createObjectURL(blob) //创建新的URL表示指定的blob对象
            const a = document.createElement('a') //创建a标签
            a.style.display = 'none'
            a.href = href // 指定下载链接
            a.download = '导出文件.xlsx' //指定下载文件名
            a.click() //触发下载
            URL.revokeObjectURL(a.href) //释放URL对象
        }
    })
}

let marksInfo = reactive({
    isMark: false,
    tableData: []
})

let fullscreen = ref(false)

const hanldeMarks = () => {
    marksInfo.isMark = true
    scoreLog(search).then((res) => {
        marksInfo.tableData = res.data
    })
}

const markList = ref()
const veEchartsRef = ref()
const tableDialog = reactive({
    tableDialogVisabled: false,
    tableComponentName: '',
    earlyWarning: 0,
    drillTrainType: ''
})

const marks = ref(0)
const total = ref(0)
const chartData = ref([
    {
        id: 1,
        name: '未及时巡查检查',
        value: 0,
        component: 'unitMange',
        type: ''
    },
    {
        id: 2,
        name: '未及时整改巡查检查不合格项',
        value: 0,
        component: 'dangerWcl',
        type: ''
    },
    {
        id: 3,
        name: '未及时组织消防演练',
        value: 0,
        component: 'rehearsal',
        type: ''
    },
    {
        id: 4,
        name: '未及时组织消防培训',
        value: 0,
        component: 'activity',
        type: ''
    },
    {
        id: 5,
        name: '高层民用建筑未及时完成消防安全评估',
        value: 0,
        component: 'pinggubaogao',
        type: ''
    },
    {
        id: 6,
        name: '巡查待审核',
        value: 0,
        component: 'unitTaskMange',
        type: ''
    },
    {
        id: 7,
        name: '三关一闭',
        value: 0,
        component: 'thirdOneClose',
        type: ''
    },
    {
        id: 8,
        name: '未学习',
        value: 0,
        component: 'study',
        type: ''
    },
    {
        id: 9,
        name: '动火动电',
        value: 0,
        component: 'thermalPowerList',
        type: ''
    },
    {
        id: 10,
        name: '公众举报',
        value: 0,
        component: 'hiddenDangerMange',
        type: ''
    },
    {
        id: 11,
        name: '烟道清洗',
        value: 0,
        component: 'flueClean',
        type: ''
    }
])
const option = reactive({
    title: {
        text: '',
        x: 'center',
        y: 'center',
        textStyle: {
            fontFamily: 'myFont',
            color: '#fff',
            fontWeight: 'normal'
        }
    },
    color: [
        '#85acfb',
        '#cfdffd',
        '#85e2bd',
        '#daf6eb',
        '#8795ae',
        '#dbdfe6',
        '#f8ce52',
        '#fdf0cb',
        '#9488fb',
        '#d5d0fd',
        '#93d6f1',
        '#e5968a',
        '#b088cb',
        '#3f90ff',
        '#d9352f',
        '#bababa',
        '#f4d990',
        '#084579',
        '#fc8800'
    ],
    tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(0,0,0, 0.5)',
        textStyle: {
            color: '#fff',
            fontFamily: 'myFont'
        },
        formatter: function (params) {
            let res = ''
            for (let i = 0; i < chartData.value.length; i++) {
                res += `<div> ${chartData.value[i].name}: <span style="color:#85acfb;">${chartData.value[i].value}</span></div>`
            }
            return res
        }
    },

    // legend: {
    //   top: "10%", //水平位置，【left\center\right\数字】
    //   left: '0%',
    //   align: "left", //字在图例的左边或右边【left/right】
    //   orient: "vertical", //图例方向【horizontal/vertical】
    //   icon: "circle", //图例形状【circle\rect\roundRect\triangle\diamond\pin\arrow\none】
    //   textStyle: {
    //     color: "#fff",
    //   },
    //   height: 260,  //设置高度，超出翻页
    //   type: "scroll", //必须设置为scroll,才可以超出翻页
    //   pageIconColor: "#fff", //激活的分页按钮颜色
    //   pageIconInactiveColor: "#fff", //没激活的分页按钮颜色
    // },
    series: [
        {
            type: 'pie',
            radius: ['40%', '60%'],
            emphasis: {
                scaleSize: 18
            },
            label: {
                show: false,
                emphasis: {
                    show: false,
                    fontSize: 14
                }
            },
            data: chartData.value
        }
    ]
})
const showTableList = (e: any) => {
    switch (e.name) {
        case '设施设备隐患':
        case '日常巡查隐患':
        case '公众举报隐患':
            markList.value.init()
            break
        default:
            e.data.component && showTableComponent(e.data.component, e.data.type)
            break
    }
    console.log(e.data.component)
}
const showTableComponent = (component: string, type: string) => {
    if (component === 'unitMange') {
        tableDialog.earlyWarning = 10
    }
    if (type) {
        tableDialog.drillTrainType = type
    }
    tableDialog.tableComponentName = component
    tableDialog.tableDialogVisabled = true
}
const getData = async () => {
    const res1 = await earlyWarning()
    chartData.value[0].value = res1.data?.cq
    chartData.value[1].value = res1.data?.bhg

    const res = await equipments({ is_wxc: 1 })
    marks.value = res.data.score
    chartData.value[2].value = res.data.total?.overtimeDrillUnitTotal || 0
    chartData.value[3].value = res.data.total?.overtimeTrainUnitTotal || 0
    chartData.value[4].value = res.data.total?.overtimeHighBuildingUnitTotal || 0
    chartData.value[5].value = res.data.total?.unExamine || 0
    chartData.value[6].value = res.data.total?.closeHiddenDangers || 0
    chartData.value[7].value = res.data.learning?.particpationNum || 0
    chartData.value[8].value = res.data.total?.thermalPower || 0
    chartData.value[9].value = res.data.total?.publicDanger || 0
    chartData.value[10].value = res.data.total?.cleaningOfFlue || 0
    total.value = chartData.value.reduce((accumulator, currentValue) => accumulator + currentValue.value, 0)
    option.title.text = '当前隐患' + total.value
    console.log(chartData.value)

}

onMounted(() => {
    getData()
})
</script>

<style lang="scss" scoped>
.dv-border-box-1 {
    font-size: 14px;

    .title {
        color: #edf4ff;
        height: 20px;
        font-family: 'myFont';
        font-size: 20px;

        img {
            height: 40px;
            margin-top: -4px;
        }
    }

    .mark-box {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .safe {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 50%;
        cursor: pointer;

        .block-inner {
            display: inline-block;
            width: 14px;
            height: 14px;
            margin-right: 8px;
        }

        .block-txt {
            color: #fff;
            margin-right: 8px;
            font-size: 14px;
        }
    }

    .trouble {
        height: 300px;
        width: 50%;
    }
}

.dv-decoration-9 {
    color: #fff;
    font-size: 14px;
}
</style>
